<template>
    <!-- 添加角色表单对话框 -->
    <el-dialog v-model="dialogVisible" :title="title" width="30%">
        {{ form }}
        <el-form label-width="120px" ref="formRef" :model="form" :rules="rules">
            <el-form-item label="菜单标题">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="路由名称">
                <el-input v-model="form.component" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="form.sortValue" />
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="0">停用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSubmit()">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</template>

<script lang="ts" setup>

import { ref } from 'vue'
import type { SysMenu } from '../impl';



// 控制对话是否展示的变量
const dialogVisible = ref(false)
const formRef = ref()
const emit = defineEmits(['submit'])
const props = defineProps({
    title: String,

})

const treeProp = {
    label: 'title',
    value: 'id'
}

const defaultForm = {
    id: null,
    title: '',
    component: '',
    sortValue: null,
    status: 1,
    parentId: null,
}
const form = ref<SysMenu>(defaultForm)





const rules = ref({
    component: [
        { required: true, message: '请输入路由', trigger: 'blur' },

    ],
    title: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
    ]


})

//进入添加
const show = (type: number, data: any) => {
    dialogVisible.value = true
    
    switch (type) {
        case 0:
            form.value = defaultForm
            break;
        case 1:
            form.value = { ...data }
            break;
        case 2:
            form.value = defaultForm
            
            form.value.parentId = data
            break;
    }

}

const handleSubmit = () => {
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            dialogVisible.value = false
            
            emit('submit', form.value)
        }
    })

}



defineExpose({
    show
})
</script>